<form class="example-form" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="row">
  <div class="col">
    <mat-card class="example-card" style="width:400px;">
        <img mat-card-image class="mx-auto d-block rounded-circle" [src]="patientprofile.ImageURL"  alt="Photo of a Shiba Inu">
        <mat-card-content>
          <h3>Your ID:{{patientprofile.UserId}}</h3>
        </mat-card-content>
        <mat-list dense>Doctors whom you are consulting:
            <mat-list-item *ngFor="let authority of patientprofile.authorized">
              Dr. {{authority}}
            </mat-list-item>
        </mat-list>
    </mat-card>
  </div>
  <div class="col">
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>FirstName</mat-label>
        <input matInput placeholder="FirstName" formControlName="FirstName">
        <mat-icon matSuffix>person</mat-icon>
      <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
      <mat-label>LastName</mat-label>
      <input matInput placeholder="LastName" formControlName="LastName">
      <mat-icon matSuffix>person</mat-icon>
    <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>      
    <mat-form-field appearance="outline" class="example-half-width">
      <mat-label>PhoneNumber</mat-label>
      <input matInput placeholder="PhoneNumber" formControlName="Phone">
      <mat-icon matSuffix>phone</mat-icon>
      <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Date of birth</mat-label>
        <input matInput placeholder="DOB" formControlName="Dob">
        <mat-icon matSuffix>today</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-full-width">
        <mat-label>Email Address</mat-label>
        <input matInput placeholder="Email Address" formControlName="EmailAddress">
        <mat-icon matSuffix>email</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Age</mat-label>
        <input matInput placeholder="Age" formControlName="age">
        <mat-icon matSuffix>person</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Gender</mat-label>
        <mat-select formControlName="gender">
          <mat-option *ngFor="let gender of Genders" [value]="gender">{{gender}}</mat-option>
        </mat-select>
        <!--<input matInput placeholder="Gender" formControlName="gender">-->
        <mat-icon matSuffix>wc</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    
    
    <button id="save" mat-raised-button color="primary"><mat-icon>save</mat-icon> SAVE </button>

  </div>
  <div class="col" formGroupName="address">
    <button id="save" mat-raised-button color="primary"><mat-icon>save</mat-icon> SAVE </button>
    <mat-divider></mat-divider>
    <h4 mat-subheader>Your Address:</h4>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>house/cabin number</mat-label>
        <input matInput placeholder="house/cabin number" formControlName="number">
        <mat-icon matSuffix>location_city</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Street</mat-label>
        <input matInput placeholder="Street" formControlName="street">
        <mat-icon matSuffix>location_city</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>City</mat-label>
        <input matInput placeholder="City" formControlName="city">
        <mat-icon matSuffix>location_city</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Country</mat-label>
        <input matInput placeholder="Country" formControlName="country">
        <mat-icon matSuffix>location_city</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
    <mat-form-field appearance="outline" class="example-half-width">
        <mat-label>Pincode</mat-label>
        <input matInput placeholder="Pincode" formControlName="pincode">
        <mat-icon matSuffix>location_city</mat-icon>
        <!--<mat-hint>FirstName</mat-hint>-->
    </mat-form-field>
  </div>
</div>
</form>
    
          
